<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map地图模式</title>
</head>
<body>


    <div class="map">
        <!-- 地图上小圆球 -->
        <div class="map-top">
            <div class="map-round">
                <i class="iconfont icon-xiangzuo"></i>  
            </div>
        </div>

        <!-- 地图上的时间小方框 -->
        <div class="map-peisu">
            <div class="map-round">
                <i class="iconfont icon-dingwei1"></i>  
            </div>

            <div class="map-peisuBot">

                <div class="map-peisu1">
                    <p>户外跑</p>
                </div>

                <ul class="map-peisu2 dpflex">

                    <li>
                        <p>配速</p>
                        <span>99'99</span>
                    </li>
                    <li>
                        <p>用时</p>
                        <span>99:99:99</span>
                    </li>
                    <li>
                        <p>距离(km)</p>
                        <span>99'99</span>
                    </li>

                </ul>

            </div>

        </div>
        


        <!-- 底部灰色 -->

        <div class="map-foot">

        </div>

    </div>

</body>
</html>